<template>
  <q-modal
    v-model="layoutModal"
    maximized
    position="right"
    :content-css="{minWidth: '100vw', minHeight: '100vh'}"
  >
    <q-modal-layout content-class="flex column modal-content">
      <template slot="header">
        <statusbar></statusbar>
        <q-toolbar>
          <!-- <q-btn color="primary" v-close-overlay label="Close" /> -->
          <q-btn flat round dense icon="reply" @click="closeModal"/>
          <q-toolbar-title>{{ $t('预警处理') }}</q-toolbar-title>
          <q-btn flat dense icon="done" :label="$t('提交')" @click="submite"/>
        </q-toolbar>
      </template>
      <!-- modal-body -->
      <div class="deal-box">
        <div class="row">
          <div class="col-4">{{ $t('处置人员') }}：</div>
          <div class="col">{{ userinfo.username }}</div>
        </div>
        <div class="row">
          <div class="col-12 input-label">{{ $t('处置内容') }}：</div>
          <!-- 多行输入 -->
          <q-input
            class="col-12 input-area-box"
            v-model="dealContent"
            type="textarea"
            :max-height="100"
            rows="3"
          />
        </div>
        <div class="row">
          <div class="col-12">{{ $t('上传附件') }}：</div>
          <file-select ref="upFile" class="col-12"></file-select>
        </div>
      </div>
      <!--
        将QInnerLoading放置为最后一个子元素。
        这对于将其显示在其他内容之上很重要。
      -->
      <q-inner-loading :visible="boxLoading">
        <template v-if="boxLoadingContent">{{ boxLoadingContent }}</template>
        <q-spinner-gears v-else size="50px" color="primary"></q-spinner-gears>
      </q-inner-loading>
    </q-modal-layout>
  </q-modal>
</template>

<script>
import FileSelect from './coms/FileSelect.vue';
export default {
  components: {
    FileSelect
  },
  data() {
    return {
      layoutModal: false,
      boxLoading: true,
      boxLoadingContent: '',
      dealContent: '',
      alertid: '',
      upFormData: null
    }
  },
  computed: {
    userinfo() {
      return this.$store.getters.userinfo || {};
    }
  },
  watch: {
    '$store.getters.subCurrPage'(val) {
      if(val === 'alert-dealPage') {
        this.layoutModal = false
      }
    }
  },
  mounted() {
    this.boxLoading = false;
  },
  methods: {
    show(data) {
      this.alertid = data.alertid;
      this.layoutModal = true;
      this.$store.dispatch('AddSubPage', 'alert-dealPage', true)
    },
    closeModal() {
      this.layoutModal = false
      this.$store.dispatch('RemoveSubPage')
    },
    submite() {
      if (!this.dealContent) {
        this.$q.notify({
          message: this.$t('请输入处置信息'),
          position: 'center'
        });
        return;
      }
      this.boxLoading = true;
      this.upFormData = new FormData();
      this.upFormData.append('alertid', this.alertid);
      this.upFormData.append('alert_handle_comment', this.dealContent);
      this.upFormData.append('alert_handle_type', '3501');
      this.upFormData.append('alert_handle_by_id', this.userinfo.userid);
      this.upFormData.append('alert_handle_by_mobile', this.userinfo.phone);
      this.upFormData.append('alert_handle_by_name', this.userinfo.username);
      // files
      let files = this.$refs.upFile.getFiles();
      files.map(file => {
        this.upFormData.append('file', file);
      });
      // 提交
      this.$axios.alertHandles(this.upFormData).then(result => {
        this.$emit('fresh');
        this.layoutModal = false;
      }).finally(() => {
        this.boxLoading = false;
      });
    }
  }
}
</script>

<style lang="less" scoped>
.q-modal-layout /deep/ .modal-content {
  background-color: #efefef;
}
.deal-box {
  > div.row {
    padding: 5px 10px;

    &:first-child {
      padding-top: 13px;
    }

    .input-label {
      margin-bottom: 10px;
    }

    .input-area-box {
      padding: 5px;
      border: 1px solid rgba(176, 176, 176, 0.5);
    }
  }
}
</style>

